import React from 'react';
import { Button } from '@/components/ui/button';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from '@/utils/utils';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  className?: string;
}

export function Pagination({ currentPage, totalPages, onPageChange, className }: PaginationProps) {
  if (totalPages <= 1) return null;

  const getVisiblePages = () => {
    const delta = 2;
    const range = [];
    const rangeWithDots = [];

    // 移动端显示更少的页码
    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
    const maxVisiblePages = isMobile ? 5 : 7;
    const mobileDelta = isMobile ? 1 : delta;

    // 如果总页数很少，直接显示所有页面
    if (totalPages <= maxVisiblePages) {
      for (let i = 1; i <= totalPages; i++) {
        rangeWithDots.push(i);
      }
      return rangeWithDots;
    }

    for (let i = Math.max(2, currentPage - mobileDelta); i <= Math.min(totalPages - 1, currentPage + mobileDelta); i++) {
      range.push(i);
    }

    if (currentPage - mobileDelta > 2) {
      rangeWithDots.push(1, '...');
    } else {
      rangeWithDots.push(1);
    }

    rangeWithDots.push(...range);

    if (currentPage + mobileDelta < totalPages - 1) {
      rangeWithDots.push('...', totalPages);
    } else if (totalPages > 1) {
      rangeWithDots.push(totalPages);
    }

    return rangeWithDots;
  };

  const visiblePages = getVisiblePages();

  return (
    <div className={cn("flex items-center justify-center mt-8", className)}>
      {/* 移动端布局 */}
      <div className="flex items-center space-x-1 md:space-x-2">
        {/* 上一页按钮 */}
        <Button
          variant="outline"
          size="sm"
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="flex items-center space-x-1 px-2 md:px-3"
        >
          <ChevronLeft className="h-4 w-4" />
          <span className="hidden sm:inline">上一页</span>
        </Button>

        {/* 页码按钮 */}
        <div className="flex items-center space-x-0.5 md:space-x-1">
          {visiblePages.map((page, index) => (
            <React.Fragment key={index}>
              {page === '...' ? (
                <span className="px-2 py-2 text-muted-foreground text-sm">...</span>
              ) : (
                <Button
                  variant={currentPage === page ? "default" : "outline"}
                  size="sm"
                  onClick={() => onPageChange(page as number)}
                  className={cn(
                    "min-w-[32px] md:min-w-[40px] h-8 md:h-9 text-sm px-2 md:px-3",
                    currentPage === page && "bg-primary text-primary-foreground"
                  )}
                >
                  {page}
                </Button>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* 下一页按钮 */}
        <Button
          variant="outline"
          size="sm"
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="flex items-center space-x-1 px-2 md:px-3"
        >
          <span className="hidden sm:inline">下一页</span>
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

      {/* 移动端页码信息 */}
      <div className="md:hidden absolute right-4 text-xs text-muted-foreground">
        {currentPage}/{totalPages}
      </div>
    </div>
  );
}
